<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--响应手机页面-->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="description" content="" />
    <script src="__PUBLIC__/view/js/jquery-1.8.3.js"></script>
    <script src="__PUBLIC__/view/js/jquery.reveal.js"></script>
    <script src="__PUBLIC__/view/js/jquery.cookie.js"></script>
    <script src="__PUBLIC__/view/js/jquery.fly.min.js"></script>
    <script src="__PUBLIC__/view/js/common.js"></script>
    <script src="__PUBLIC__/view/js/template.js"></script>
    <script src="__PUBLIC__/view/js/jquery.tmpl.js"></script>


    <script src="__PUBLIC__/view/js/cart.lib.js"></script>
    <script src="__PUBLIC__/admin/layer/layer.js"></script>
    <script src="__PUBLIC__/admin/js/dialog.js"></script>

    <script>
        var a="{:U('Order/addOrder')}";
        var imgBig="{:U('Api/showPicture')}";
        var flyImg = "__PUBLIC__/view/img/round_24.png";
    </script>
    <script src="__PUBLIC__/view/js/cart.js"></script>


    <script src="__PUBLIC__/admin/layer/layer.js"></script>
    <script src="__PUBLIC__/admin/js/dialog.js"></script>

    <!--template--------------------商品内容----------------------------------------------------------------------------------------------------->
    <script type="text/html" id="template1">
        <div class="menu-item" item-id="${itemId}">
            <div class="item-wrap">
                <input type="hidden" class="inputItemId" value="${itemId}"/>
                <img class="dishImg" id="dishBigImg" src="${image}" height="130" width="130">
                <!--详情-->
                <div class="item-detail" style="width: 80%">
                    <span class="name" value="${name}">${name}</span>
                    <span class="price" item-price="${price}" style="display:inline-block;">￥${price}</span>

                    <!--点击区域-->
                    <div class="dishContent">
                        <input type="hidden" class="inputItemId" value="${itemId}"/>

                        <ul class="itemCheckout-body" id="itemCheckout-body">
                            详情
                        </ul>
                    </div>
                    <span class="name hide" value="${name}">${name}</span>
                </div>
                <!--下单-->
                <div class="orderNow">
                    <img  src="__PUBLIC__/view/img/icon_plus.png">
                </div>
            </div>
        </div>
    </script>
    <!--template--------------------左栏分类----------------------------------------------------------------------------------------------------->
    <script type="text/html" id="templateClassify">
            <dd id="i${classify_id}" class=" leftmenu-item"><a value="${classify_id}">${classify_name}</a></dd>
    </script>
    <!--template--------------------内容范围----------------------------------------------------------------------------------------------------->
    <script type="text/html" id="templateContent">
        <div id="m${classify_id}" class="menu-wrap hide"></div>
    </script>

    <!--Async.js-->
    <script>
        window.template();
    </script>


    <link rel="icon" href="__PUBLIC__/view/img/favicon.ico" type="img/x-icon" />
    <!--[if lte IE 10]>
    <script src="__PUBLIC__/view/js/requestAnimationFrame.js"></script>


    <![endif]-->

    <link rel=stylesheet href="__PUBLIC__/view/css/reset.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/common.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/base.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shop.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/header.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/shopcart.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/leftmenu.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/reveal.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/login.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/mycommon.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/combo.select.css">
    <link rel=stylesheet href="__PUBLIC__/view/css/doing.css">
    <title>点餐系统</title>

    <style>
    </style>
</head>
<body>


<!--Vue.js-->
<div id="app"></div>
<!--菜品展示-->
<div class="content-middle n" id="divClassifyContent">
    <!--<div id="m1" class="menu-wrap"  >-->
        <!--&lt;!&ndash;&lt;!&ndash;TODO:for循环&ndash;&gt;&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="menu-item" v-bind:item-id="item.itemId" v-for="item in dishData">&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="item-wrap" v-on:click="clickItem">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="hidden" class="inputItemId" v-bind:value="item.itemId"/>&ndash;&gt;-->
                <!--&lt;!&ndash;<img class="dishImg" id="dishBigImg" v-bind:src="item.image" height="130" width="130">&ndash;&gt;-->
                <!--&lt;!&ndash;&lt;!&ndash;详情&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="item-detail" style="width: 80%">&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="name" v-bind:value="item.name">{{item.name}}</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="price" v-bind:item-price="item.price" style="display:inline-block;">￥{{item.price}}</span>&ndash;&gt;-->

                    <!--&lt;!&ndash;&lt;!&ndash;点击区域&ndash;&gt;&ndash;&gt;-->
                    <!--&lt;!&ndash;<div class="dishContent" v-on:click="clickDishContent">&ndash;&gt;-->
                        <!--&lt;!&ndash;<input type="hidden" class="inputItemId" v-bind:value="item.itemId"/>&ndash;&gt;-->

                        <!--&lt;!&ndash;<ul class="itemCheckout-body" id="itemCheckout-body">&ndash;&gt;-->
                            <!--&lt;!&ndash;详情&ndash;&gt;-->
                        <!--&lt;!&ndash;</ul>&ndash;&gt;-->
                    <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--&lt;!&ndash;<span class="name hide" v-bind:value="item.name">{{item.name}}</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
                <!--&lt;!&ndash;&lt;!&ndash;下单&ndash;&gt;&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="orderNow">&ndash;&gt;-->
                    <!--&lt;!&ndash;<img  src="__PUBLIC__/view/img/icon_plus.png">&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->


    <!--</div>-->


    <!--<div id="m2" class="menu-wrap hide"  >-->
         <!--m2的部分-->
    <!--</div>-->
</div>
<!--header部分-->
<div class="header shadow">
    <h3 class="curTableNum curTableNums_in_topbar">第 ? 桌</h3>
    <div class="header-left fl">
        <div class="icon fl"></div>
        <a class="weixin-dingfan fw" href="#">微信订饭</a>
        <div class="search hide">
            <img class="search-icon" src="__PUBLIC__/view/img/icon_search.png" width="20" height="20">
            <input id="search-input" class="search-input" type="text" placeholder="" onkeypress="onKeySearch()">
            <span id="search-del" class="search-del">&times;</span>
        </div>
        <div class="clear"></div>
    </div>
    <div class="header-right fr">
        <div class="login fl">
                    <span class="header-operater">
                    <a href="doing.html " style="display: none">订单列表</a>
                    <a href="#" class="hide">我的订单</a>
                    <a  href="#" class="hide">联系我们</a>
                    </span>


            <a id="dish-desc" class="navBtn f-radius f-select n" data-reveal-id="dishDescModel" data-animation="fade">
                菜品详情
            </a>


            <a id="id-myOrderedDish" class="navBtn f-radius f-select n" data-reveal-id="myOrderedDish" data-animation="fade">
                菜品详情
            </a>
        </div>
        <div id="cart" class="cart fr" style="display:none;">
            <img class="cart-icon" src="__PUBLIC__/view/img/icon_cart_22_22.png">
        </div>
        <div id="user" class="user fr n">
            <img class="user-icon" src="__PUBLIC__/view/img/icon_my.png">
        </div>
    </div>
</div>
<!--内容部分-->
<div class="shop-content ">

    <div class="leftmenu">
        <dl class="leftmenuContent">
            <!--分类内容-->
        </dl>
    </div>

    <div class="shop-cart shadow n">
        <div class="shop-head">
            菜单<a class="shop-clear" >[清空]</a>

            <h3 class="curTableNum">第 ? 桌</h3>
            <select class="selectTable"  style="margin-top: 10px; display: none;" >
                <option value="-1">请选择桌号</option>
                <option value="01">第 01 桌</option>
                <option value="02">第 02 桌</option>
                <option value="03">第 03 桌</option>
                <option value="04">第 04 桌</option>
                <option value="05">第 05 桌</option>
                <option value="06">第 06 桌</option>
                <option value="07">第 07 桌</option>
                <option value="08">第 08 桌</option>
                <option value="09">第 09 桌</option>
                <option value="10">第 10 桌</option>
                <option value="11">第 11 桌</option>
                <option value="12">第 12 桌</option>
            </select>

        </div>
        <div class="shop-body">
            <div class="isnull">
                <span></span>
                <b>菜单空空如也</b>
            </div>
        </div>
        <div class="shop-bottom">
            <div class="bottom-price fl">预计菜金：￥<label>0</label>
            </div>
            <div class="bottom-icon"></div>
            <div class="bottom-pay fr">
                <a id="cart-pay-bottom">立即下单</a>
            </div>
        </div>
    </div>

    <ul id="subnav" class="subnav subnav-shadow n">
        <li><a href="account/setting.html" target="">账号设置</a></li>
        <li><a href="account/order.php" target="">我的订单</a></li>
        <li><a href="account/balance.html" target="">我的余额</a></li>
        <li><a href="account/cash.html" target="">代金券</a></li>
        <li><a href="account/address.html" target="">我的地址</a></li>
        <li><a id="sub-logout" href="" target="">退出</a></li>
    </ul>
</div>


<div class="shop-cart-bottom shadow n" >

        <select class="selectTable"  style="margin-top: 10px; display: none;" >
            <option value="-1">请选择桌号</option>
            <option value="01">第 01 桌</option>
            <option value="02">第 02 桌</option>
            <option value="03">第 03 桌</option>
            <option value="04">第 04 桌</option>
            <option value="05">第 05 桌</option>
            <option value="06">第 06 桌</option>
            <option value="07">第 07 桌</option>
            <option value="08">第 08 桌</option>
            <option value="09">第 09 桌</option>
            <option value="10">第 10 桌</option>
            <option value="11">第 11 桌</option>
            <option value="12">第 12 桌</option>
        </select>

    </div>

    <div class="shop-bottom-bottom" style="display: none;">
        <div class="bottom-price" id="cal_bottom">预计菜金：￥<label></label>
        </div>
        <div class="bottom-icon"></div>
        <div class="bottom-pay fr" >
            <a id="cart-pay">立即下单</a>
        </div>
    </div>
    <div style="clear: both; "></div>
</div>


<!-- 菜品详情 -->
<!--弹出框-->
<div id="dishDescModel" class="reveal-modal">
    <div id="loginform" class="loginform n">
        <!--事实上可以整个模板替换-->
        <div>
            <div class="loginformfield">
                <span class="form-icon"><img src="__PUBLIC__/view/img/logo-50-50.jpg"></span>
            </div>
            <div class="loginformfield">
                    <span class="form-title">
                    <h2 class="revealTableNum"></h2>
                    </span>
            </div>
            <div class="loginformfield">
                <ul class="checkout-body" id="checkout-body">
                    <li class='checkout-tablerow'>

                    </li>

                </ul>
            </div>
            <div class="loginformfield">

            </div>
        </div>
        <div class="loginform-buttons">
            <a id="closeReveal_2" class="save-btn" href="#">确定</a>
            <span>友情提示：点击空白区域可关闭本窗口</span>
        </div>
    </div>

    <a class="close-reveal-modal"><img src="__PUBLIC__/view/img/icon_close.png" height="24" width="24"></a>
</div>





<!--弹出框-->
<div id="myOrderedDish" class="reveal-modal myOrderedDish_max_height">

    <div id="myOrderedDishForm" class="loginform n block" style="top: 50px;padding-bottom: 50px; max-width: 70%;">
        <div class="shop-head">
            菜单<a class="shop-clear" >[清空]</a>
            <h3 class="curTableNum">第 ? 桌</h3>
        </div>

        <div class="shop-body">

        </div>

        <div class="loginform-buttons">
            <a id="myCloseReveal" class="save-btn" href="#">确定</a>
            <span>友情提示：点击空白区域可关闭本窗口</span>
        </div>

    </div>


    <a class="close-reveal-modal"><img src="__PUBLIC__/view/img/icon_close.png" height="24" width="24"></a>
</div>



<script src="__PUBLIC__/view/js/md5.js"></script>
<script src="__PUBLIC__/view/js/myInfo.js"></script>
<script src="__PUBLIC__/view/js/shopInfo.js"></script>
<script src="__PUBLIC__/view/js/login.js"></script>

<script src="__PUBLIC__/view/js/header.js"></script>
<script src="__PUBLIC__/view/js/shop.js"></script>

<script src="__PUBLIC__/view/js/jquery.combo.select.js"></script>
<script>

    var resetPage = function () {
        var zw=$(window).width();
        var shopCartWidth=$('.shop-cart').width();
        var leftMenuWidth=$('.leftmenu').width();
        var mw=zw-shopCartWidth-leftMenuWidth;
        $(".content-middle").width(mw);
        $(".content-middle").css('left', leftMenuWidth);
        $(".menu-wrap").width(mw);

        console.log("zw>>"+zw);

        var percent='48%';
        var marginLeft=0;
        //显示两列
//            if(mw>=700){      //默认
        if(zw>=1000){
            percent='48%';
            marginLeft=mw-mw*0.48*2;
            if(zw<1240){
                $(".stars").css('bottom', 40);
                $(".price").css('left', 140);
                // $(".buy").css('left', 180);
                $(".price").css('right', '');
                $(".buy").css('right', 10);
            }else{
                //样式归位
                $(".stars").css('bottom', 5);
                $(".price").css('left', '');
                // $(".buy").css('left', '');
                $(".price").css('right', 50);
                $(".buy").css('right', 10);
            }

            $('.shop-cart').show();
            $('.shop-cart-bottom').css("display", "none");
            $('.shop-bottom-bottom').css("display", "none");

            $(".header").css("min-width", "1000px");
        }
        //只显示一列
//            else if(mw<700){  //默认
        else if(zw<1000){
            percent='96%';
            marginLeft=mw-mw*0.96;

            if(zw<660){
                $(".stars").css('bottom', 40);
                $(".price").css('left', 140);
                // $(".buy").css('left', 180);
                $(".price").css('right', '');
                $(".buy").css('right', 10);
            }else{
                //样式归位
                $(".stars").css('bottom', 5);
                $(".price").css('left', '');
                // $(".buy").css('left', '');
                $(".price").css('right', 50);
                $(".buy").css('right', 10);
            }

            /**
             * 将购物车显示于界面下方
             */
            $('.shop-cart').hide();

            $(".item-name").css("width", "50%");

            $('.shop-cart-bottom').css("display", "block");

            $('.shop-bottom-bottom').css("display", "block");

            var zw=$(window).width();

            $(".content-middle").width(zw);
            $(".menu-wrap").width(zw);

            $(".header").css("min-width", "300px");

//                $("#myOrderedDish").width("70%");

        }

        $(".menu-item").css('width', percent);
        $(".item-wrap").css('margin-left', marginLeft);

    }


    $('select').comboSelect();

</script>
<script type="text/javascript">



    $(function(){

        //就是$(window).resize()所调用的方法；
        var resizePage = function(){

            //设置左侧的高
            var zh=$(window).height();

            var leftHeight=zh-55;
            $(".leftmenu").height(leftHeight);

//            console.log("为什么不能响应式:>>>"+$(window).width());

            //公告宽度
            processGonggao();

            //菜品div宽度
            processMenuItems();

            //购物车
            processShopItem();

        };

        //存商家信息到cookie
        var shopId=$('.shop-name').attr('shopId');
        var shopName=$('.shop-name').attr('shopName');
        var shopPhone=$('.shop-name').attr('shopPhone');
        $.cookie('shopId',shopId,{expires:365,path:'/'});//写cookie
        //初始化购物车
        initCart();
        $('.shop-cart').show();

        //左侧导航
        var zh=$(window).height();
        var leftHeight=zh-55;
        $(".leftmenu").height(leftHeight);
        //公告宽度
        processGonggao();

        //菜品div宽度
        processMenuItems();

        //购物车
        processShopItem();


        $('.gonggao').show();
        $('.content-middle').show();


        //监听窗口尺寸
        $(window).resize(resizePage);


        //菜品相关
        function processMenuItems(){
            var zw=$(window).width();
            var shopCartWidth=$('.shop-cart').width();
            var leftMenuWidth=$('.leftmenu').width();
            var mw=zw-shopCartWidth-leftMenuWidth;
            $(".content-middle").width(mw);
            $(".content-middle").css('left', leftMenuWidth);
            $(".menu-wrap").width(mw);


            var percent='48%';
            var marginLeft=0;
            //显示两列
//            if(mw>=700){      //默认
            if(zw>=1000){
                percent='48%';
                marginLeft=mw-mw*0.48*2;
                if(zw<1240){
                    $(".stars").css('bottom', 40);
                    $(".price").css('left', 140);
                    // $(".buy").css('left', 180);
                    $(".price").css('right', '');
                    $(".buy").css('right', 10);
                }else{
                    //样式归位
                    $(".stars").css('bottom', 5);
                    $(".price").css('left', '');
                    // $(".buy").css('left', '');
                    $(".price").css('right', 50);
                    $(".buy").css('right', 10);
                }


                $('.shop-cart-bottom').css("display", "none");
                $('.shop-bottom-bottom').css("display", "none");
                $('.shop-cart').show();

            }
            //只显示一列
//            else if(mw<700){  //默认
            else if(zw<1000){
                percent='96%';
                marginLeft=mw-mw*0.96;

                if(zw<660){
                    $(".stars").css('bottom', 40);
                    $(".price").css('left', 140);
                    // $(".buy").css('left', 180);
                    $(".price").css('right', '');
                    $(".buy").css('right', 10);
//                    $(".leftmenu").css("min-width", "20%");
                }else{
                    //样式归位
                    $(".stars").css('bottom', 5);
                    $(".price").css('left', '');
                    // $(".buy").css('left', '');
                    $(".price").css('right', 50);
                    $(".buy").css('right', 10);
                    $(".leftmenu").show();

                }

                /**
                 * 将购物车显示于界面下方
                 */
                $('.shop-cart').hide();

                $(".item-name").css("width", "50%");

                $('.shop-cart-bottom').css("display", "block");

                $('.shop-bottom-bottom').css("display", "block");

                var zw=$(window).width();

                $(".content-middle").width(zw);
                $(".menu-wrap").width(zw-leftMenuWidth);


//                $("#myOrderedDish").width("70%");

            }
            $(".menu-item").css('width', percent);
            $(".item-wrap").css('margin-left', marginLeft);


//            $(".menu-item").css('width', 1000);

        }

        //公告宽度
        function processGonggao(){
            var zw=$(window).width();
            var shopCartWidth=$('.shop-cart').width();
            var leftMenuWidth=$('.leftmenu').width();
            var gw=zw-shopCartWidth-leftMenuWidth-40;
            var gw_wrap=gw+50;
            $(".gonggao").width(gw);
            $(".gonggao").css('left', leftMenuWidth+10);
            $(".gonggao-wrap").width(gw_wrap);
            $(".gonggao-wrap").css('left',leftMenuWidth );
        }

    });

</script>


<!-- 包括所有已编译的插件 -->
<script src="__PUBLIC__/view/js/bootstrap.min.js"></script>
<!--导入vue.js-->
<script src="__PUBLIC__/view/js/vue.js"></script>
<!--axios-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->


<script>


    // 这是我们的Model
    var exampleData = {
        dishData: [],
        selectedTable: []
    };

    var that;

    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    var vue = new Vue({
        el: '#app',
        data: exampleData,
        mounted: function() {
            that = this;
            this.showCurTable();
            this.reqData();
        },
        methods: {
            //请求菜
            reqData:function() {
                var reqDishData = "{:U('Api/menuInfo')}";
                var index = layer.load();
                $.ajax({
                    type: "get",
                    url: reqDishData,
                    data: {},
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        that.onSuccessReqData(data);
                        layer.close(index);
                    },
                    error: function () {
                        alert("获取菜品失败：请稍后再试!");
                        layer.close(index);
                    }
                });

            },//
            onSuccessReqData: function (data) {
                if (data.code == 21000) {
                    if (!data.data || data.data.length == 0) {
                        alert("对不起、当前菜品为空");
                        return;
                    }
                    var rsData = data.data;
                    that.loadDish(rsData);
                    console.log(rsData.toString());
                    exampleData.dishData = rsData;
                    alert("获取菜品成功！");
                    resetClickListener($);
                    that.resizePage();

                } else {
                    alert("获取菜品失败!");
                }
            },
            loadDish: function (rsData) {
                $('#templateContent').tmpl(rsData).appendTo('#divClassifyContent');
                for (var i = 0; i < rsData.length; i ++) {
                    var categoryData = rsData[i];
                    var divId = "#m"+categoryData.classify_id;

                    $('#template1').tmpl(categoryData.dishs).appendTo(divId);
                }

                if (rsData.length > 0)
                    $("#m"+rsData[0].classify_id).show();

                $('#templateClassify').tmpl(rsData).appendTo('.leftmenuContent');
            },
            showCurTable: function() {
                //取出numberTable
                var shopId=$.cookie('shopId');
                console.log("shop.html>>>shopId"+shopId);

                if(shopId){
                    var numberTables = $.cookie('table'+shopId);
                    if (numberTables) {
                        var arr = numberTables.split(',');
                        if(arr && arr.length>0){
                            console.log(arr);
                            exampleData.selectedTable = arr;
                            $('.curTableNum').html("第 "+numberTables+" 桌");
                        } else {
                            alert("下单失败：没有选择桌号");
                            console.log("下单失败。。没有 桌号");
                            //跳转到点餐页面
                            location.href="place.html";
                        }
                    }
                } else {
                    alert("下单失败：没有商家号，请稍后再试");
                    console.log("下单失败。。请稍后再试");
                    //跳转到点餐页面
                    location.href="place.html";
                }
            },//
            resizePage: function () {
                var zw=$(window).width();
                var shopCartWidth=$('.shop-cart').width();
                var leftMenuWidth=$('.leftmenu').width();
                var mw=zw-shopCartWidth-leftMenuWidth;
                console.log("leftMenuWidth>>>"+leftMenuWidth);
                $(".content-middle").width(mw);
                $(".content-middle").css('left', leftMenuWidth);
                $(".menu-wrap").width(mw);

                console.log("zw>>"+zw);

                var percent='48%';
                var marginLeft=0;

                //显示两列
//            if(mw>=700){      //默认
                if(zw>=1000){
                    percent='48%';
                    marginLeft=mw-mw*0.48*2;
                    if(zw<1240){
                        $(".stars").css('bottom', 40);
                        $(".price").css('left', 140);
                        // $(".buy").css('left', 180);
                        $(".price").css('right', '');
                        $(".buy").css('right', 10);
                    }else{
                        //样式归位
                        $(".stars").css('bottom', 5);
                        $(".price").css('left', '');
                        // $(".buy").css('left', '');
                        $(".price").css('right', 50);
                        $(".buy").css('right', 10);
                    }

                    $('.shop-cart').show();
                    $('.shop-cart-bottom').css("display", "none");
                    $('.shop-bottom-bottom').css("display", "none");

                    $(".header").css("min-width", "1000px");
                }
                //只显示一列
//            else if(mw<700){  //默认
                else if(zw<1000){
                    percent='96%';
                    marginLeft=mw-mw*0.96;

                    if(zw<660){
                        $(".stars").css('bottom', 40);
                        $(".price").css('left', 140);
                        // $(".buy").css('left', 180);
                        $(".price").css('right', '');
                        $(".buy").css('right', 10);


                    }else{
                        //样式归位
                        $(".stars").css('bottom', 5);
                        $(".price").css('left', '');
                        // $(".buy").css('left', '');
                        $(".price").css('right', 50);
                        $(".buy").css('right', 10);
                    }

                    /**
                     * 将购物车显示于界面下方
                     */
                    $('.shop-cart').hide();

                    $(".item-name").css("width", "50%");

                    $('.shop-cart-bottom').css("display", "block");

                    $('.shop-bottom-bottom').css("display", "block");

                    var zw=$(window).width();

                    $(".content-middle").width(zw);
                    $(".menu-wrap").width(zw-leftMenuWidth);

                    $(".header").css("min-width", "300px");

//                $("#myOrderedDish").width("70%");

                }
                $(".menu-item").css('width', percent);
                $(".item-wrap").css('margin-left', marginLeft);
            },
            clickItem: function() {},
            clickDishContent: function() {}
        }
    });
</script>


</body>

<style>
    .leftmenu-item {
        padding-left: 0px;
        padding-top:15px;
        padding-bottom:15px;
    }
    .leftmenu dd a{
        padding-left: inherit;
        text-align: center;
        font-size:14px;
        line-height: 17px;
        max-height: 50px;
        overflow-y: hidden;
    }
</style>
</html>